<template>
  <div>
    <div class="modal" v-show="show" transition="fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <!--头部-->
          <div class="modal-header">
            <div class="header">
              <a class="close floatRight" href="javascript:void(0)" @click="close(1)">&times;</a>
              <slot name="header">
                <p class="title">{{modal.title}}</p>
              </slot>
            </div>
          </div>
          <!--内容区域-->
          <div class="modal-body">
            <slot name="body">
              <p class="notice">{{modal.text}}</p>
            </slot>
          </div>
          <!--尾部,操作按钮-->
          <div class="modal-footer">
            <slot name="button">
              <a v-if="modal.showCancelButton" href="javascript:void(0)" class="button">{{modal.cancelButtonText}}</a>
              <a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button">{{modal.confirmButtonText}}</a>
            </slot>
            </slot>
          </div>
        </div>
      </div>
    </div>
    <div v-show="show" class="modal-backup" transition="fade"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data() {
      return {
        show: false,   // 是否显示模态框
        resolve: '',
        reject: Function,
        promise: ''  // 保存promise对象
      }
    },
    /**
     * modal 模态接口参数
     * @param {string} modal.title 模态框标题
     * @param {string} modal.text 模态框内容
     * @param {boolean} modal.showCancelButton 是否显示取消按钮
     * @param {string} modal.cancelButtonClass 取消按钮样式
     * @param {string} modal.cancelButtonText 取消按钮文字
     * @param {string} modal.showConfirmButton 是否显示确定按钮
     * @param {string} modal.confirmButtonClass 确定按钮样式
     * @param {string} modal.confirmButtonText 确定按钮标文字
     */
    props: ['modalOptions'],
    methods: {
      /**
       * 确定,将promise断定为完成态
       */
      submit() {
        this.resolve('submit')
      },
      /**
       * 关闭,将promise断定为reject状态
       * @param type {number} 关闭的方式 0表示关闭按钮关闭,1表示取消按钮关闭
       */
      close(type) {
        this.show = false
        this.reject(type)
      },
      /**
       * 显示confirm弹出,并创建promise对象
       * @returns {Promise}
       */
      confirm() {
        this.show = true
        this.promise = new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
        })
        return this.promise  // 返回promise对象,给父级组件调用
      }
    },
    computed: {
      /**
       * 格式化props进来的参数,对参数赋予默认值
       */
      modal: {
        get() {
          let modal = this.modalOptions
          modal = {
            title: modal.title || '提示',
            text: modal.text,
            showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton,
            cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
            cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
            showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass,
            confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
            confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定'
          }
          return modal
        }
      }
    }
  }
</script>

<style>
  .modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    margin: 30px auto;
  }
  .modal-header{
    background: #2d2d2d;
  }
  .modal-header .header{
    height: 38px;
    line-height: 38px;
    color: #fff;
    padding-left: 18px;
    border-radius: 4px 4px 0 0;
  }
  .header .close{
    font-size: 20px;
    margin-right: 20px;
  }
  .modal-dialog {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,0);
    width: 528px;
    background: #fff;
  }
  .modal-backup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
  }

  .modal-enter .modal-container,
  .modal-leave .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  </style>
